<template>
  <div class="container">
    <n-checkbox
      @update:checked="onUpdate"
      v-model:checked="bingStore.bingChecked"
      size="medium"
      label="必应壁纸"
    />
    <div style="width: 100px; margin-left: 10px">
      <n-color-picker
        v-model:value="themeConfig.primary"
        :show-preview="true"
        :modes="['hex']"
        :swatches="swatches"
        size="small"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useThemeStore } from "@/stores/models/theme";
import { useBingStore } from "@/stores/models/bing";

const bingStore = useBingStore();
const themeStore = useThemeStore();
const themeConfig = themeStore.themeConfig;
const swatches = ref([
  "#f5222d",
  "#fa541c",
  "#fa8c16",
  "#fadb14",
  "#a0d911",
  "#52c41a",
  "#13c2c2",
  "#1677ff",
  "rgb(13, 148, 150)",
  "#2f54eb",
  "#722ed1",
  "#eb2f96",
  "#262626",
  "#595959",
  "rgb(187, 27, 27)",
  "#faad14",
]);
onMounted(() => {});

const onUpdate = (value) => {
  bingStore.bingChecked = value;
};
</script>
<style scoped lang='scss'>
.container {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 240px;
  border-radius: 8px;
  height: 60px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>